<template>
  <div class="el-container">
    <el-form
      ref="loginForm"
      class="loginForm"
      :model="loginForm"
      :rules="rules"
      label-position="right"
      label-width="120px"
    >
      <el-form-item prop="username" label="用户名：">
        <el-input v-model.trim="loginForm.username"> </el-input>
      </el-form-item>

      <el-form-item prop="password" label="密码：">
        <el-input v-model="loginForm.password" ref="pwd"> </el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-edit" @click="login"
          >登录
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-remove"
          @click="() => $router.push('/reg')"
          >注册
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" icon="el-icon-delete" @click="libaiTest"
          >李白测试
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-edit" @click="swaggerLogin"
          >测试匿名登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import New from './components/New.vue';
import flag from "@/data/flatRoutes";
import router from "@/router";
import { appContextRouteConfig } from "@/router";
import nprogress from "nprogress";
import { loginApi } from "@/api/apis";
export default {
  name: "Logon",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      loginForm: {
        username: "zhangjiu001",
        password: "114477",
      },
      rules: {},
      localFlatRoutes: [],
      routesForRouter: [],
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {
    console.log(this.$route.query.username);
    if (this.$route.query.username) {
      this.loginForm.username = this.$route.query.username;
      this.loginForm.password = null;
      this.$refs.pwd.focus();
    }
  },
  methods: {
    sampleM() {},
    login() {
      // 第一步 发用户名密码身份仁恒
      nprogress.start();
      // this.$http({
      //   method: "post",
      //   url: "/login",
      //   data: `username=${this.loginForm.username}&password=${this.loginForm.password}`,
      // })
      loginApi(this.loginForm.username, this.loginForm.password)
        //    第二步  缓存上一步结果 并且开始发送路由信息查询请求 并且缓存本步骤结果
        .then(
          (res) => {
            //{"username":"zhangjiu001","userId":1,"nickname":"张老九","lastLoginTime":"2021-07-21T09:45:23.88"}
            // this.$store.state.userInfo=res.data;
            //
            nprogress.set(0.2);
            this.$store.commit("updateUserInfo", res.data);
            // this.$message.warning(JSON.stringify(res.data));
            this.$message.success("用户登录成功了，返回了用户信息进入vuex");
            return this.$store.dispatch("loadDynamicRoutes");
          },
          (error) => {
            console.log(" 登录失败 error : " + error.response.status);
          }
        )
        //       动态路由添加
        .then((res) => {
          nprogress.set(0.4);
          appContextRouteConfig.children = this.$store.state.routesForRouter;
          this.$router.addRoute(appContextRouteConfig);
        })
        //        为诸多业务服务的代码
        .then(() => {
          nprogress.inc();
          return this.$store.dispatch("getApplyStates");
        })
        .then(() => {
          nprogress.inc();
          return this.$store.dispatch("getAuditStates");
        })
        .then(() => {
          nprogress.inc();
          return this.$store.dispatch("getLeaveTypes");
        })
        .then(() => {
          nprogress.inc();
          return this.$store.dispatch("getCommodityTypesTree");
        })
        //      最后路由跳转
        .then(() => {
          nprogress.set(0.8);
          setTimeout(() => {
            nprogress.done();
            this.$router.push("/dashboard");
          }, 1200);
        });
    },
    libaiTest() {
      this.loginForm.username = "libai06";
      this.loginForm.password = "161616";
    },
    swaggerLogin() {
      this.$store.commit("updateUserInfo");
      this.$store.commit("loadDynamicRoutes", flag);
      appContextRouteConfig.children = this.$store.state.routesForRouter;
      this.$router.addRoute(appContextRouteConfig);
      setTimeout(() => {
        this.$router.push("/dashboard");
      }, 800);
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-container {
  justify-content: center;
}
.el-form {
  margin-top: 150px;
  .el-input {
    width: 190px;
  }
}
</style>
